<template>
    <div id="pieceBasic">
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1%">
                <el-input placeholder="工站名称" v-model="WorkStationName"></el-input>
            </el-col>
            <!-- 工厂 -->
            <el-col :xs="3" :sm="2" :md="2" :lg="2">
                <el-select @change="GetDepart" v-model="valueFactory" clearable placeholder="工厂">
                    <el-option v-for="item in FactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                </el-select>
            </el-col>
            <!-- 部门 -->
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1%">
                <el-select @change="GetOffice"  v-model="valueDepart" clearable placeholder="隶属部门">
                    <el-option v-for="item in DepartOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                </el-select>
            </el-col>
            <!-- 科室 -->
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1% 0 0">
                <el-select  v-model="valueOffice" clearable placeholder="隶属科室">
                    <el-option v-for="item in OfficeOptions" :key="item.OfficeCode" :label="item.OfficeName" :value="item.OfficeCode"></el-option>
                </el-select>
            </el-col>
            <el-col :xs="8" :sm="8" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增</el-button>
            </el-col>
        </div>
        <el-table  max-height="600" class="table_pieceBasic" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable label="序号"></el-table-column>
            <el-table-column prop="ID" sortable label="唯一标识" v-if="false"></el-table-column>
            <el-table-column prop="WorkStationNum" sortable label="工站号"></el-table-column>
            <el-table-column prop="WorkStationName" label="工站名称"></el-table-column>
            <el-table-column prop="DepartCode" sortable label="隶属部门ID" v-if="false"></el-table-column>
            <el-table-column prop="DepartmentName" sortable label="部门"></el-table-column>
            <el-table-column prop="OfficeCode" sortable label="隶属科室ID" v-if="false"></el-table-column>
            <el-table-column prop="OfficeName" sortable label="科室"></el-table-column>
            <el-table-column prop="FactoryID" sortable label="隶属工厂ID" v-if="false"></el-table-column>
            <el-table-column prop="FactoryName" sortable label="工厂" v-if="false"></el-table-column>
            <el-table-column prop="WorkContent" label="工作内容" show-overflow-tooltip></el-table-column>
            <!--   物料号  物料名称 -->
            <el-table-column prop="MaterielCode" label="物料代码" v-if="false"></el-table-column>
            <el-table-column prop="MaterielNum" label="物料号"></el-table-column>
            <el-table-column prop="MaterielName" label="物料名称"></el-table-column>
            <!-- 工时  单价 -->
            <el-table-column prop="ProcessHours" label="工时"></el-table-column>
            <el-table-column prop="UnitPrice" label="单价"></el-table-column>
            <!-- 作业描述 -->
            <el-table-column prop="Description" label="作业描述" show-overflow-tooltip></el-table-column>
            <!-- 操作人员 -->
            <el-table-column prop="ModifyDate" sortable label="时间"></el-table-column>
            <el-table-column prop="OperationUser" sortable label="操作人员ID" v-if="false"></el-table-column>
            <el-table-column prop="OperationUserName" sortable label="操作人员"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增计件 -->
        <el-dialog title="新增计件" :visible.sync="dialogFormVisible" >
            <el-form :model="form" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="隶属工厂"  :label-width="formLabelWidth">
                    <el-select @change="AddGetDepart" v-model="AddvalueFactory" clearable placeholder="工厂">
                        <el-option v-for="item in AddFactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="隶属部门"  :label-width="formLabelWidth">
                    <el-select @change="AddGetOffice"  v-model="AddvalueDepart" clearable placeholder="隶属部门">
                        <el-option v-for="item in AddDepartOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="隶属科室"  :label-width="formLabelWidth">
                    <el-select @change="AddGetStation" v-model="AddvalueOffice" clearable placeholder="隶属科室">
                        <el-option v-for="item in AddOfficeOptions" :key="item.OfficeCode" :label="item.OfficeName" :value="item.OfficeCode"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 获得所有 工站 下拉框  -->
                <el-form-item label="工站代号"  :label-width="formLabelWidth">
                    <el-select v-model="AddvalueStation" clearable placeholder="工站代号">
                        <el-option v-for="item in AddStationOptions" :key="item.WorkStationNum" :label="item.WorkStationName" :value="item.WorkStationNum"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 物料号 -->
                <el-form-item label="产品型号">
                    <el-select v-model="valueMateriel" clearable placeholder="请选择">
                        <el-option v-for="item in GetAllMater" :key="item.MaterielCode" :label="item.MaterielName" :value="item.MaterielCode"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 描述 -->
                <el-form-item label="作业描述" :label-width="formLabelWidth">
                    <el-input v-model="form.Description" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 工时 单价 -->
                <div style="display: flex;">
                    <div style="flex: 10">
                        <el-form-item label="作业工时" :label-width="formLabelWidth">
                            <el-input v-model="form.ProcessHours" auto-complete="off" style="width: 50%"></el-input>
                        </el-form-item>
                    </div>
                    <!--<div style="flex: 10">-->
                        <!--<el-form-item label="单价" :label-width="formLabelWidth">-->
                            <!--<el-input v-model="form.UnitPrice" auto-complete="off" style="width: 50%"></el-input>-->
                        <!--</el-form-item>-->
                    <!--</div> -->
                    <div style="flex: 10;"></div>
                </div>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑计件报表 -->
        <el-dialog title="修改计件报表" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left;width: 90%;margin: auto;">
                <!-- 部门 -->
                <el-form-item label="隶属部门"  :label-width="formLabelWidth">
                    <el-select v-model="formEdit.DepartCode" clearable placeholder="隶属部门">
                        <el-option v-for="item in EditDepartOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 科室 -->
                <el-form-item label="隶属科室"  :label-width="formLabelWidth">
                    <el-select v-model="formEdit.OfficeCode" clearable placeholder="隶属科室">
                        <el-option v-for="item in EditOfficeOptions" :key="item.OfficeCode" :label="item.OfficeName" :value="item.OfficeCode"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 工站 下拉框  -->
                <el-form-item label="工站代号"  :label-width="formLabelWidth">
                    <el-select v-model="formEdit.WorkStationNum" clearable placeholder="工站代号">
                        <el-option v-for="item in EditStationOptions" :key="item.WorkStationNum" :label="item.WorkStationName" :value="item.WorkStationNum"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 物料号 下拉框-->
                <el-form-item label="成品料号">
                    <el-select v-model="formEdit.MaterielCode" clearable placeholder="请选择">
                        <el-option v-for="item in EditGetAllMater" :key="item.MaterielCode" :label="item.MaterielName" :value="item.MaterielCode"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 工时   -->
                <el-form-item  label="作业工时"  :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.ProcessHours" auto-complete="off" style="width: 50%"></el-input>
                </el-form-item>
                <el-form-item  label="作业单价"  :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.UnitPrice" auto-complete="off" style="width: 50%"></el-input>
                </el-form-item>
                <el-form-item label="作业描述" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.Description" auto-complete="off" style="width: 50%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除计件报表 -->
        <el-dialog title="删除计件报表" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                //    表格
                tableData:[],
                //  工厂
                FactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                valueFactory:'',    //  选择的是哪个工厂号
                //  部门
                DepartOptions:[],    //  工厂   一选择工厂就确定有哪些部门
                valueDepart:'',    //  选择的是哪个部门
                //  科室
                OfficeOptions:[],    //  工厂   一选择部门就确定有哪些科室
                valueOffice:'',    //  选择的是哪个科室
                //   按条件 查询
                WorkStationName:'',
                //     分页
                PageCount:10 ,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
//  新增计件报表
                //  工厂
                AddFactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                AddvalueFactory:'',    //  选择的是哪个工厂号
                //  部门
                AddDepartOptions:[],    //  部门   一选择工厂就确定有哪些部门
                AddvalueDepart:'',    //  选择的是哪个部门
                //  科室
                AddOfficeOptions:[],    //  科室   一选择部门就确定有哪些（科室）
                AddvalueOffice:'',    //  选择的是哪个科室
                //  根据科室获取工站
                AddStationOptions:[],    // 工站   一选择部门就确定有哪些（工站）
                AddvalueStation:'',    //  选择的是哪个工站
                //  获取物料
                GetAllMater:[],
                valueMateriel:'',
//   新增计件
                dialogFormVisible: false,
                form: {
                    MaterielCode: 0,
                    ProcessHours: 0,    //  工时
                    Description: '' ,     //  作业描述
                },
                formLabelWidth: '120',
//  编辑计件
                //  工厂
                EditFactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                EditvalueFactory:'',    //  选择的是哪个工厂号
                //  部门
                EditDepartOptions:[],    //  部门   一选择工厂就确定有哪些部门
                //  科室
                EditOfficeOptions:[],    //  科室   一选择部门就确定有哪些（科室）
                //  根据科室获取工站
                EditStationOptions:[],    // 工站   一选择部门就确定有哪些（工站）
                //  获取物料
                EditGetAllMater:[],

                EditFormVisible: false,
                formEdit:{},
                formLabelWidthEdit:'100',
//  删除计件
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'100'
            }
        },
        methods: {
            //    分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   一加载页面就应该知道有哪些工厂
            GetFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    this.FactoryOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.FactoryOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //  一选择工厂，就知道有哪些部门
            GetDepart(){
                let url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.valueFactory ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    console.log("隶属部门 ");
//                    console.log(response.data);
                    if(Code == 200){   // 正常请求到数据
                        this.DepartOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 父级请求失败");
                    console.log(response)
                })
            },
            //  一选择部门，就知道有哪些科室
            GetOffice(){
                let url = "http://192.168.3.238:8088/OfficeManager/GetOfficeByPre?DepartID=" + this.valueDepart ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.OfficeOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 请求失败");
                    console.log(response)
                })
            },
            //   计件基础报表  表格
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/PieceBasis/GetPieceBasis?WorkStationName=" + this.WorkStationName + "&DepartCode=" +
                        this.valueDepart + "&OfficeCode="+ this.valueOffice +"&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage;
                console.log("查询条件  >>>>>>>>>>>>>>>>>>>>>>>>>>  ")
                console.log(url)
                this.$http.get(url,).then(response=>{
                    this.tableData=[] ;    //  必须加
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = response.data.Total;
                        for(let i=0;i<response.data.ObjList.length;i++){
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("计件表格 >>>>>>>>>>>>>>>>>> ")
                    console.log(response.data)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
// 新增计件报表
            //   一点击新增   就应该知道有哪些工厂
            AddGetFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.AddFactoryOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //  一选择工厂，就知道有哪些部门
            AddGetDepart(){
                let url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.AddvalueFactory ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    console.log("隶属部门 ");
//                    console.log(response.data);
                    if(Code == 200){   // 正常请求到数据
                        this.AddDepartOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 父级请求失败");
                    console.log(response)
                })
            },
            //  一选择部门，就知道有哪些科室
            AddGetOffice(){
                let url = "http://192.168.3.238:8088/OfficeManager/GetOfficeByPre?DepartCode=" + this.AddvalueDepart ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.AddOfficeOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 请求失败");
                    console.log(response)
                })
            },
            //  一选择科室，就知道有哪些工站
            AddGetStation(){
                let url = "http://192.168.3.238:8088/WorkStationManager/GetWorkStationByOfficeCode?OfficeCode=" + this.AddvalueOffice ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.AddStationOptions = response.data.ObjList ;
                    }
                    console.log("工站集合 >>>>>>>>>>>>>>>>>>>>..  ")
                    console.log(this.AddStationOptions)
                }, response => {
                    console.log(" 请求失败");
                    console.log(response)
                })
            },
            //  新增计件
            add() {
                this.selectAllMater();
                console.log("点击新增按钮 >>>>>>>>>>>>>>  ");
//                this.A();
                this.AddGetFactory();
                this.dialogFormVisible = true;
            },
            addForm(){      //   post
                let addUrl = "http://192.168.3.238:8088/PieceBasis/AddPieceBasis";
                let addForm = {
                    "WorkStationNum":this.AddvalueStation,
                    "DepartCode":this.AddvalueDepart,     //  部门代号
                    "OfficeCode":this.AddvalueOffice,     //  科室代号
                    "MaterielCode":this.valueMateriel,    //  物料代号
                    "ProcessHours":this.form.ProcessHours,
                    "Description":this.form.Description,   //  作业描述
                    "OperationUser":1,
                }
                if(this.AddvalueStation == null){
                    alert("工站不能为空")
                }
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            if(response.data.Message = '不能重复添加'){
                                alert("不能重复添加工站");
                                that.dialogFormVisible = true ;
                            }else{
                                that.dialogFormVisible = false ;
                                that.selectTable();

                            }
//                            console.log(response.data.Message);
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
            },
            //   获取 所有物料
            selectAllMater(){
                let url = "http://192.168.3.238:8088/MaterielManager/GetMaterielByType?MaterielType=4";
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.GetAllMater = response.data.ObjList;
                    }
                    console.log("有问题 》》》》》》》》》》》")
                    console.log(this.GetAllMater)
                }, response => {
                    console.log(" 表格添加失败");
                    console.log(response)
                })
            },
//            A(){
//                if(this.addForm.DepartCode == 0){
//                    this.addForm.DepartCode = null ;
//                }
//                if(this.addForm.OfficeCode == 0){
//                    this.addForm.OfficeCode = null ;
//                }
//                if(this.addForm.MaterielCode == 0){
//                    this.addForm.MaterielCode = null ;
//                }
//                if(this.form.ProcessHours == 0){
//                    this.form.ProcessHours = null ;
//                }
//                if(this.form.UnitPrice == 0){
//                    this.form.UnitPrice = null ;
//                }
//            },
//   修改  计件基础报表
//   一点击修改   就知道有哪些部门
            EditGetDepart(){
                let url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.valueFactory ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    console.log("隶属部门 ");
//                    console.log(response.data);
                    if(Code == 200){   // 正常请求到数据
                        this.EditDepartOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 父级请求失败");
                    console.log(response)
                })
            },
            //  一选择部门，就知道有哪些科室
            EditGetOffice(){
                let url = "http://192.168.3.238:8088/OfficeManager/GetOfficeByPre?DepartCode=" + this.formEdit.DepartCode ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.EditOfficeOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 请求失败");
                    console.log(response)
                })
            },
            //  一选择科室，就知道有哪些工站
            EditGetStation(){
                let url = "http://192.168.3.238:8088/WorkStationManager/GetWorkStationByOfficeCode?OfficeCode=" + this.formEdit.OfficeCode ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.EditStationOptions = response.data.ObjList ;
                    }
                    console.log("工站集合 >>>>>>>>>>>>>>>>>>>>..  ")
//                    console.log(this.EditStationOptions)
                }, response => {
                    console.log(" 请求失败");
                    console.log(response)
                })
            },
            //   获取 所有 物料
            EditselectAllMater(){
                let url = "http://192.168.3.238:8088/MaterielManager/GetMaterielByType?MaterielType=4";
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.EditGetAllMater = response.data.ObjList;
                    }
                }, response => {
                    console.log(" 表格添加失败");
                    console.log(response)
                })
            },
            //  点击  编辑 按钮
            handleEdit(index,row){
                this.formEdit = row ;
                this.EditGetDepart();
                this.EditGetOffice();
                this.EditGetStation();
                this.EditselectAllMater();
                this.EditFormVisible = true ;
                console.log("计件 >>>>>>>>>>>>>>>>>>>>  ");
                console.log(this.formEdit);
            },
            //   点击 编辑  确定 按钮
            editForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/PieceBasis/UpdatePieceBasis";
                let EditForm = {
                    "ID":this.formEdit.ID,
                    "DepartCode":this.formEdit.DepartCode,     //  下拉
                    "OfficeCode":this.formEdit.OfficeCode,      //  下拉
                    "WorkStationNum":this.formEdit.WorkStationNum,     //  下拉
                    "MaterielCode":this.formEdit.MaterielCode,     //  下拉
                    "ProcessHours":parseFloat(this.formEdit.ProcessHours) ,     //   带出来
                    "Description":this.formEdit.Description,     //   描述
                    "OperationUser":1,    //  操作者工号
                }
                console.log("修改工序的 的  >>>>>>>>>>>  EditForm  ");
                console.log(typeof this.formEdit.ProcessHours);
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改计件 >>>>>>>>>>>>>>>>>>>>>>>>>>> ");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  点击删除按钮
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
                console.log("删除获得这行上的数据  ")
//                console.log(row)
            },
            //  点击 删除确定按钮
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/PieceBasis/DeletePieceBasis";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "ID":this.formDelete.ID,
                    "OperationUser":1,    //  操作者工号
                };
                let that = this;  //   that  管用的
                console.log("删除");
//                console.log(DeleteUrl);
//                console.log(deleteItem);
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功");
//                        console.log(response);
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },
        },
        mounted: function () {   //  onload
            this.selectTable();
            this.GetFactory();  //  工厂
        }
    }
</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #pieceBasic {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_pieceBasic thead tr th {
        text-align: center;
    }
</style>